<!--
 * @Author: Tao
 * @Date: 2021-10-22 14:17:00
 * @LastEditors: Tao
 * @LastEditTime: 2021-10-23 21:59:17
 * @Description: 
-->
<template>
  <div class="baseLog">
    <!-- 表格部分 -->
    <el-table :data="baseLogData.list"  >       
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="realname" label="访问人真实姓名"></el-table-column>
      <el-table-column prop="method" label="访问方式"></el-table-column>
      <el-table-column prop="content" label="访问路径"></el-table-column>
      <el-table-column  label="访问时间">
        <template v-slot="scope">
          {{ scope.row.logTime | fmtDateTime}}
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页查询  分页插件 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="baseLogData.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="baseLogData.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="baseLogData.total">
    </el-pagination>
  </div>
</template>

<script>
import request from "@/utils/request";
  export default {
    data(){
      return{
        baseLogData:[],
        queryParams:{
          page:1,
          pageSize:10,
        },
        
      }
    },
    methods:{
      // 获取表格数据
      findAllBaseLogData(){
        request.get("/baseLog/pageQuery",{
          params: this.queryParams,
        }).then(res => {
          // console.log(res); 
           this.baseLogData = res.data;
        })
      },
      // 分页size-change事件
      handleSizeChange(pageSize){
        // 点击分页容量，将最新的pageSize设置到数据模型中
        this.queryParams.pageSize = pageSize;
        // 重新调用分页查询的方法，做数据重载
        this.findAllBaseLogData();
      },
      // 分页current-change事件
      handleCurrentChange(page){
        this.queryParams.page = page;
        this.findAllBaseLogData();
      }
    },
    created() {
      this.findAllBaseLogData();
    }
  }
</script>

<style scoped>

</style>